<template>
  <view class="goodsList" v-if="goodsList.length !== 0">
    <view class="title u-border-bottom">商品列表</view>
    <view class="goods" v-for="(item, idx) in goodsList" :key="idx">
      <view class="left">
        <image class="img" :src="item.goodsImage" mode="scaleToFill" />
      </view>
      <view class="right">
        <view class="goodsName">{{ item.goodsName }}</view>
        <view class="des">{{ item.skuName || "默认" }}</view>
        <view class="info">
          <view class="infoItem" v-for="(x, idx) in infoList" :key="idx">
            <text>{{ x.name }}: </text>
            <text v-if="x.preUnit">{{ x.preUnit }}</text>
            <text>{{ getValue(x.value, item) }}</text>
            <text v-if="x.afterUnit">{{ item[x.afterUnit] }}</text>
          </view>
        </view>
      </view>
      <view class="btns">
        <image
          class="img"
          @click="() => handleDel(item, idx)"
          src="@/static/commodity/delete.png"
          mode=""
        ></image>
        <image
          class="img"
          @click="() => handleEdit(item, idx)"
          src="@/static/commodity/edit.png"
        ></image>
      </view>
    </view>
  </view>
</template>
<!-- 填写入库,出库,盘点,退货单商品列表 -->
<script setup>
import { computed } from "vue";
import { useOrderStore } from "@/store/order";
const orderStore = useOrderStore();
const goodsList = computed(() => {
  return orderStore.goodsList;
});
const props = defineProps({
  infoList: {
    type: Array,
    default() {
      return [
        { name: "成本", value: "10.99", preUnit: "¥" },
        { name: "系统数量", value: "10", afterUnit: "箱" },
        { name: "库存金额", value: "109.90" },
        { name: "单价", value: "10.99", preUnit: "¥" },
        { name: "盘点数量", value: "10", afterUnit: "箱" },
        { name: "盘点金额", value: "109.90" },
        { name: "备注", value: "备注信息" },
      ];
    },
  },
});

const emits = defineEmits(["del", "edit"]);

/**
 *
 * @param {*} value 回显的字段 eg: price || price * unit
 * @param {*} item  数据对象
 * @return 具体的数据
 */
const getValue = (value, item) => {
  const pattern = /(\w+)\*(\w+)/;
  if (pattern.test(value)) {
    try {
      // 匹配到*号两边内容,进行运算处理
      const matches = value.match(pattern);
      if (matches) {
        const _price = matches[1];
        const _unit = matches[2];
        return uni.$u.priceFormat(item[_price] * item[_unit], 2);
      } else {
        return item[value];
      }
    } catch (e) {
      console.log("回显错误", e);
      return item[value];
    }
  } else {
    // 普通值
    return item[value];
  }
};
const handleDel = (item, index) => {
  emits("del", {
    item: item,
    index: index,
  });
};
const handleEdit = (item, index) => {
  emits("edit", {
    item: item,
    index: index,
  });
};
</script>
<style lang="scss">
.goodsList {
  background-color: #fff;
  .title {
    padding-top: 19px;
    padding-bottom: 9px;
    padding-left: 16px;
    font-size: 14px;
    color: #434343;
    line-height: 22px;
  }
  .goods {
    position: relative;
    display: flex;
    padding-bottom: 7px;
    .left {
      width: 68px;
      padding-top: 11px;
      padding-left: 16px;
      margin-right: 15px;
      .img {
        display: block;
        width: 68px;
        height: 59px;
      }
    }
    .right {
      padding-top: 13px;
      margin-right: 38px;
      flex: 1;
      .goodsName {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        margin-bottom: 5px;
      }
      .des {
        font-size: 10px;
        color: #a0a0a0;
        line-height: 14px;
        margin-bottom: 4px;
      }
      .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .infoItem {
          font-size: 10px;
          color: #a0a0a0;
          line-height: 14px;
          // width: 33%;
          // white-space: nowrap;
          margin-right: 10px;
          margin-bottom: 5px;
          &:nth-child(3n) {
            margin-right: 0;
            flex: 1;
          }
          &:last-child {
            width: 100%;
          }
        }
      }
    }
    .btns {
      position: absolute;
      top: 34px;
      right: 16px;
      width: 15px;
      .img {
        display: block;
        width: 14px;
        height: 15px;
        & + .img {
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
